<!DOCTYPE html>
<html>
<head>

	<title>Density</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0">
	<link href="../images/favicon.ico" rel="icon" type="image/x-icon" >
	
	<link href="../css/main.css" type="text/css" rel="stylesheet" />
	<link href="../css/1140.css" type="text/css" rel="stylesheet" />
	
	<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
	
	<link href="../plugins/jquery.jqplot.min.css" type="text/css" rel="stylesheet" />
	<script src="../plugins/jquery.jqplot.min.js" type="text/javascript"></script>
	
	<script src="../plugins/jqplot.barRenderer.min.js" type="text/javascript"></script>
	<script src="../plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
	<script src="../plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>

	<script src="../plugins/jqplot.pieRenderer.min.js" type="text/javascript"></script>
	<script src="../plugins/jqplot.donutRenderer.min.js" type="text/javascript"></script>
	
	<link href="act22.css" type="text/css" rel="stylesheet" />
	<script src="extra22.js" type="text/javascript"></script>
	
	<style>
		div.sec {
			height: 530px;
		}
		.mat {
			width: 48%;
		}
		.val, .val2 {
			display: inline-block;
			float: left;
			width: 23%;
			margin: 1%;
		}
	</style>

</head>
<body>

	<div class="container16">
	
		<div class="row">
		
			<div class="data sec column6">
				<h1>Data</h1>
				<div class="dataRowTitle">
					<div class="mat">Material</div>
					<div class="val">Recycled (grams)</div>
					<div class="val2">Not Recycled (grams)</div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text" value=""></div>
					<div class="val"><input class="value1" type="text" value=""></div>
					<div class="val2"><input class="value2" type="text" value=""></div>
				</div>
				<h1>Labels</h1>
				<div class="dataRow">
					<div class="whole">Title:</div>
					<div class="whole"><input type="text" class="title"/></div>
				</div>
			</div>
			
			<div class="graph sec column10">
				<h1>Graph</h1>
				<div class="preGraph">
					<button class="go bigGo">Graph it!</button>
				</div>
				<div class="postGraph hideHeight">
					
					<div id="chart2" style="height:390px; width:550px;"></div>
					<br/>
					<button class="go smGo">Re-graph</button>
				</div>
			</div>
		
		</div>
		
		<div class="row">
			<a href="extra.php"><button class="">Last Graph</button></a>
			<a href="https://docs.google.com/spreadsheet/ccc?key=0AjVk2Rng8IhIdERCYlNXUGZwNTdGbDZWSDBlVEh4eVE&usp=sharing">All Tables</a>
		</div>
	
	</div>
	
	<script>
	</script>

</body>
</html>